<template>
  <div id="app">
    <div class="navbar">
      {{ navTitle }}
    </div>
    <ComponentLoader
      :url="componentLoaderData.url"
      :propsData="componentLoaderData.propsData"
    />
  </div>
</template>

<style lang="stylus" scoped>
  .navbar {
    background #000
    color #fff
    padding 30px
  }
</style>

<script>
  import Vue from "vue";
  import Component from "vue-class-component";
  import ComponentLoader from "@components/module/compnent-loader";
  @Component({
    components: {
      ComponentLoader
    }
  })
  export default class App extends Vue {

    navTitle = '';

    componentLoaderData = {
      url: "",
      propsData: {}
    };

    /**
     * 解析当前路由信息
     * 绑定匹配处理
     */
    resolveRoute() {
      this.$navigo.events.on("match", ({ component, params, query }) => {
        document.title = this.navTitle = component.container.title;
        this.componentLoaderData = {
          url: component.container.component,
          propsData: { component, params, query, navigo: this.$navigo }
        };
      });
      this.$navigo.router.resolve();
    }

    created() {
      this.resolveRoute();
    }
  }
</script>
